<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body style="font-size: 20px;">
  <style>
      .box{
          color: orange;
          /* 设置字体大小：浏览器默认字体大小16px，最小12px */
          font-size: 20px;
          /* 设置字体，font-family的字体使用的是用户计算机中所安装的字体 */
          /* font-family字体的后备机制，如果前面的字体不存在，则会往后查找 */
          font-family: '华文行楷','黑体';
          /* 加粗 */
          font-weight: bold;
          /* 取消加粗 */
          /* font-weight: normal; */
          /* 字体倾斜 */
          font-style: italic;
          /* 取消倾斜 */
          /* font-style: normal; */
          /* 文本对齐方式
                  left左对齐
                  center居中对齐
                  right右对齐
              注意：text-ailgn可以对文本、行块、行级元素应用，对块级元素的对齐不起作用
          */
          text-align: center;
          /* 文本修饰线
              text-decoration:
                      overline:顶划线
                      line-through:中划线
                      underline:下划线
                      none:无
          */
          /* text-decoration: overline;
          text-decoration: line-through; */
          text-decoration: underline;
          /* text-decoration: none; */

          width: 200px;
          background-color: blueviolet;
          /* 强制不换行 */
          white-space: nowrap;
          /* 溢出容器的部分隐藏 */
          overflow: hidden;
          /* 文本溢出隐藏 */
          text-overflow: ellipsis;

          /* 文本缩进 单位支持px，em，rem
                  1em=父元素的font-size
                  1rem=html根元素的font-size
          */
          text-indent: 2em;
          font-size: 1rem;
      }
      html{
          font-size: 20px;
      }
  </style>
  <div class="box">文本内容文本内容文本内容文本内容</div>
  <div style="font-family:'华文行楷'">文本内容</div>
</body>

</html>